<div class="account_treeview fl" <#if (menuCode2!"")=="billimport">style="flex: 0 0 180px;display:none;"<#else>style="flex: 0 0 180px;"</#if>>
	<div class="treebox" height="100%;" style="width: 180px;">
		<div class="account-lefttree">
			<div class="account-allqx"><input type="checkbox" class="account-allbtn" id = "checkAll"><span class="allz" style="cursor:pointer;">全选</span></div>
			<div class="account-allzk" id = "fold" style="cursor:pointer;"><span>全部展开</span></div>
		</div>
		<div class="account_treeview_buttonarea">
			<input type="text" class="form-control" id="searchAccount" value="" placeholder="搜索" />
			<i id="searchAccountButton"></i>
		</div>
		<div class="account_treeview_scroll" id="bannerbig">
			
			<ul id="treeDemo" class="ztree"></ul>
		</div>
	</div>
	<div class="tree-on"></div>
</div>
<script type="text/javascript">
   function refreshSize(){
       var totolHeight =  document.documentElement.clientHeight;
       var height = totolHeight - 165;
       // console.log(totolHeight + ' - ' + height);
       document.getElementById('bannerbig').style.height = height+'px';
   };
   refreshSize();
   window.onresize = refreshSize;

	var _checkedAccount = new Array();
	var _baseData=[];
	var _data=[];
   /* 加载菜单信息 */
   var setting = {
       check:{
           enable:true,//是否显示radio/checkbox
           chkboxType:{  //表示父子节点的联动效果
               "Y" : "ps",
               "N" : "ps"
           },
           radioType: "all",
           chkStyle:"checkbox" //值为checkbox或者radio表示
       },
       callback:{
           onCheck:_zTreeOnCheck,
           onDblClick: zTreeOnDblClick
       },
       view: {
           showIcon: false
       },
       data : {
           simpleData : {
               enable : true
           },
           showTitle : true, //是否显示节点title信息提示 默认为true
           key : {
               title : "title" //设置title提示信息对应的属性名称 也就是节点相关的某个属性
           }
       }
   };
	$(function() {
		resize();
        refreshTree();
        $('#checkAll').parent().on('click',function (e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var node = zTree.getNodes();
            var nodes = zTree.transformToArray(node);
            var checkNode = zTree.getCheckedNodes().length;
            //已选中的节点数小于总数 - 全选
            if (checkNode < nodes.length) {
                $('#checkAll').prop('checked', true)
                zTree.checkAllNodes(true);
            } else{
                $('#checkAll').prop('checked', false)
                zTree.checkAllNodes(false);
            }
            _checkedAccount = new Array();
            let nodess = zTree.getCheckedNodes(true);
            for(let i=0;i<nodess.length;i++){
                let node = nodess[i];
                let accountBodyCard = node.accountBodyCard;
                let accountBody = node.accountBody;
                if(accountBodyCard){
                    var str = accountBody+"_"+accountBodyCard;
                    if(_checkedAccount.indexOf(str)<0){
                        _checkedAccount.push(str);
                    }
                }
            }
            try{
                var childWindow = $(".J_iframe:visible")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。  []将JQuery对象转成DOM对象，用DOM对象的contentWindow获取子页面window对象。
                childWindow._checkedCallback();
            }catch(e){

            }
        })
		var fold = false;
        $('#fold').on('click',function (e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            if (fold) {
                $('#fold span').text('全部展开');
                // $('#fold img').attr('src','../../../image/open.png');
                zTree.expandAll(false);
                fold = false
            } else{
                $('#fold span').text('全部折叠');
                // $('#fold img').attr('src','../../../image/fold.png');
                zTree.expandAll(true);
                fold = true
            }
        })


		$(window).resize(function() {
			resize();
		});

		//给多选按钮绑定事件
		$("#open_multi").change(function(e) {

			if (e.target.checked){
				setting.check.chkStyle="checkbox"
				$.fn.zTree.init($("#treeDemo"), setting, _data);
			}else{
				setting.check.chkStyle="radio"
				$.fn.zTree.init($("#treeDemo"), setting, _data);
			}
			_checkedAccount = new Array();
		});
	});

	function resize(){
		var clientHeight=document.body.clientHeight;
		var clientWidth=document.body.clientWidth;
		$(".bill-right").css("height",(clientWidth+200)+"px");
	};

	function refreshTree(){
        $.ajax({
            type : "Post",
            url : '${ctx}/bill/getAccountTree2',
            data:{caseId:caseId},
            dataType : "json",
            success : function(result) {
                _baseData = result.data;
                _data = _baseData;
                $.fn.zTree.init($("#treeDemo"), setting, _data);
                fuzzySearch('treeDemo','#searchAccount',null,true); //初始化模糊搜索方法
            },
            error : function() {
                //alert("菜单加载失败！")
            }
        });
	}
   function _zTreeOnCheck(event, treeId, treeNode){
       _checkedAccount = new Array();
       let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
       let nodes = treeObj.getCheckedNodes(true);
       let not = treeObj.getNodes();
       let notes = treeObj.transformToArray(not).length;
       let checkNode = treeObj.getCheckedNodes().length;
       if(notes == checkNode){
           $('#checkAll').prop('checked', true)
       }else{
           $('#checkAll').prop('checked',false)
       }
       for(let i=0;i<nodes.length;i++){
           let node = nodes[i];
           let accountBodyCard = node.accountBodyCard;
           let accountBody = node.accountBody;
           if(accountBodyCard){
               var str = accountBody+"_"+accountBodyCard;
               if(_checkedAccount.indexOf(str)<0){
                   _checkedAccount.push(str);
               }
           }
       }
       try{
           var childWindow = $(".J_iframe:visible")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。  []将JQuery对象转成DOM对象，用DOM对象的contentWindow获取子页面window对象。
           childWindow._checkedCallback();
       }catch(e){

       }
   }

   function zTreeOnDblClick(event, treeId, treeNode){
       var zTree = $.fn.zTree.getZTreeObj("treeDemo");
       var nodes = zTree.getNodesByParam("pId",treeNode.id);
       let cardNumbers = '';
       if(nodes!=null && nodes.length>0){
           for(var i=0;i<nodes.length;i++){
               cardNumbers += nodes[i].name + ',';
           }
           if(cardNumbers.length>0){
               cardNumbers = cardNumbers.substring(0, cardNumbers.lastIndexOf(','));
           }
       }
       var param = {};
       param.accountBody = treeNode.name;
       param.accountBodyCard = treeNode.name;
       param.cardNumbers = cardNumbers;
       param.level = treeNode.level;
       param.caseId = caseId;
       var url;
       if(treeNode.level == 0){
           url = "${ctx}/bill/stream/d3/leftTreeDialogAccountBodyInit";
       }else{
           url = "${ctx}/bill/stream/d3/leftTreeDialogAccountBodyCardInit";
       }
       var d = top.dialog({
           title : '档案详情',
           modal : true,
           url : url,
           height : 800,
           width : 1500,
           data : param,
           onshow : function () {
           }
       });
       d.show();
       return false;
   }
</script>
<style>
	/*.tree-on:active{
		transform: translateX(-180px) ;
	}*/
	#searchAccount{
		width: 160px!important;
		height: 24px;
	}
	input[type='checkbox']{
		width: 13px;
		height: 13px;
		border: 1px solid #c9c9c9;
		border-radius: 2px;
		outline: none;
	}
	.account-allqx {
		width: 50px;
		height: 20px;
		font-size: 15px;
		margin-left: 10px;
		display: inline-block;
		position: relative;
		color: #000;
	}
	span.allz {
		margin-left: 20px;
		font-size: 14px;
		position: absolute;
		top: -1px;
	}
	input#checkAll {
		position: absolute;
		top: 7px;
	}
	.account-allzk {
		display: inline-block;
		margin-left: 50px;
		font-size: 13px;
		color: #287CDF;
		cursor: pointer;
	}
	.account-lefttree {
		height: 35px;
		line-height: 35px;
		border-bottom: 1px solid #DADEE1;
		border-right: 1px solid #DADEE1;
	}
	.ztree li, .ztree li a{
		margin-bottom: 0;
	}
	.ztree li{
		margin-top: -10px;
		line-height: 20px
	}
	.ztree li, .ztree li a {
		margin-bottom: 4px!important;
	}
	li{
		position: relative;
	}
	span._nodeTextClass {
		display: inline-block;
		width: 137px;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-right: 10px;
	}
	.treeview span.icon{
		font-size: 13px;
		color: #A3A3A3;
	}
	#edit_b {
		font-size: 16px;
		padding-left: 55px;
		color: #A3A3A3;
		position: absolute;
		top: 8px;
		right: 29px;
	}
	#edit_s {
		font-size: 22px;
		padding-left: 6px;
		position: absolute;
		top: 4px;
		right: 4px;
		color: #A3A3A3;
	}
	.form-control:focus{
		border-color: #4595ec;
	}
	.content{
		background-color: #eef3f7;
	}
	.fl{
		float:left;
	}
	.ml10{
		margin-left:10px;
	}
	.treebox{
		height:100%;
	}
	.account_treeview{
		flex:0 0 180px;
		background-color: #E9EDF0;
		height:100%;
		overflow: hidden;
		z-index: 2;
		margin-left: 10px;
	}
	.account_treeview_scroll{
		overflow-y:auto;
		height:100%;
		float: left;
   		width: 180px;
		overflow-x: auto;
	}
	.account_treeview_buttonarea{
		height: 50px;
		display: block;
		padding: 10px;
		position: relative;
		z-index: 1;
		background-color: #E9EDF0;
		margin-top: 0px;
	}
	.account_treeview_buttonarea input{
		border-radius:4px;
	}
	.account_treeview_buttonarea i{
		height: 15px;
		width: 15px;
		background-image: url(${ctx}/imgs/searchl.png);
		display: block;
		position: absolute;
		z-index: 99;
		cursor: pointer;
		left: 143px;
		top: 14px;
	}
	.bg_gray{
		background-color: #edf3f7;
	}
	.box{
		padding:0 15px 10px 15px;
		margin-left: 240px;
	}
	.box-nav{
		font-size: 16px;
		font-family: 微软雅黑;
		color:#9a9899;
		margin-bottom:10px;
	}
	.box-header{
		background-color: #fff;
		color:#6f7689;
		padding-top:0px;
	}
	.box-header .form-group{
		margin-top:10px;
	}
	.box-body{
		background-color: #fff;
		margin-top: 20px;
		min-height:400px;
	}
	.bill-right{
		float: left;
		margin-left:20px;
	}
	.bill-buttonarea .btn{
		height:32px;
		width:80px;
		margin-right:20px;
		font-size:14px;
	}
	.list-group-item{
		border:none;
	}
	.node-treeview-checkable{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.glyphicon-unchecked:before{
		content:"";
		background: url('${ctx}/imgs/unchecked.png') no-repeat top left;
		height: 16px;
		width: 16px;
		position: absolute;
		top: -18px;
	}
	.glyphicon-triangle-right:before {
		content: "\e250";
		position: absolute;
		top: -16px;
	}
	.glyphicon-triangle-bottom:before {
		content: "\e252";
		position: absolute;
		top: -16px;
	}
	.glyphicon-check:before{
		content:"";
		background: url('${ctx}/imgs/checked.png') no-repeat top left;
		height: 16px;
		width: 16px;
		position: absolute;
		top: -18px;
	}
	.glyphicon-chevron-right:before{
		content:"";
		background: url('${ctx}/imgs/right.png') no-repeat top left;
		height: 16px;
		width: 16px;
		position: absolute;
		top: -15px;
	}
	.glyphicon-chevron-down:before{
		content:"";
		background: url('${ctx}/imgs/down.png') no-repeat top left;
		height: 16px;
		width: 16px;
		position: absolute;
		top: -15px;
	}
	.stream_search{
		background: #fff;
		margin: 0 0 30px 0;
		padding-top:25px;
	}
	.stream_body{
		background: #fff;
	}
	.stream_body .title{
		font-size: 14px;
		font-weight:800;
	}
	.ztree *{
		font-size: 14px;
	}
	.ztree li,
	.ztree li a{
		margin-bottom: 10px;
	}
	.tree-on{
	    width: 5px;
	    height: 100%;
	    float: right;
	    display: block;
	    background: #fff;
		/*transition:  left  2s  ease  0s;*/
	}
	.tree-on:after{
		content:"";
		width:16px;
		height: 50px;
		display: block;
    	position: absolute;
    	top: 50%;
		left: 224px;
    	cursor:pointer;
    	background-size:100%;
		/*background:#fff url("${ctx}dist/images/treeico.png");*/
		background:url("${ctx}/imgs/login-imgs/tree-on.png") no-repeat;
	}
	.tree-on:hover::after{
		content:"";
		width:16px;
		height: 50px;
		display: block;
		position: absolute;
		top: 50%;
		left: 224px;
		cursor:pointer;
		background-size:100%;
		background:url("${ctx}/imgs/login-imgs/tree-onh.png") no-repeat;
	}
	.tree-off{
	    width: 5px;
	    height: 100%;
	    float: right;
	    display: block;
	    background: #fff;
	}
	.tree-off:after{
		content:"";
		width:16px;
		height:50px;
		display: block;
    	position: absolute;
    	top: 50%;
    	cursor:pointer;
    	background-size:100%;
		background:url("${ctx}/imgs/login-imgs/tree-off.png") no-repeat;
	}
	.tree-off:hover::after{
		content:"";
		width:16px;
		height:50px;
		display: block;
		position: absolute;
		top: 50%;
		cursor:pointer;
		background-size:100%;
		background:url("${ctx}/imgs/login-imgs/tree-offh.png") no-repeat;
	}
</style>
